<!DOCTYPE html>
<html lang="en">
  <head></head>
  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
  </script>
  <body>
    <h2>Add Facebook Login to your webpage</h2>

    <!-- Set the element id for the JSON response -->

    <p id="profile"></p>

    <script>
      // Add the Facebook SDK for Javascript

      (function (d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk/debug.js";
        fjs.parentNode.insertBefore(js, fjs);
      })(document, "script", "facebook-jssdk");

      window.fbAsyncInit = function () {
        // https://www.facebook.com/v17.0/dialog/oauth?client_id=1813852259031513&redirect_uri=https://gitwjh.gitee.io/pages/
        // <!-- Initialize the SDK with your app and the Graph API version for your app -->
        FB.init({
          appId: "1813852259031513",
          xfbml: true,
          version: "v17.0",
        });
        // <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
        FB.login(function (response) {
          if (response.authResponse) {
            console.log("Welcome!  Fetching your information.... ");
            FB.api("/me", { fields: "name, email" }, function (response) {
              document.getElementById("profile").innerHTML =
                "Good to see you, " +
                response.name +
                ". i see your email address is " +
                response.email;
            });
          } else {
            //  <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
            console.log("User cancelled login or did not fully authorize.");
          }
        });
      };
    </script>
  </body>
</html>
